<template>
  <div>
    <h2><el-text>班级信息</el-text></h2>
    <el-descriptions size="large" border direction="vertical">
      <el-descriptions-item label="班级名" width="33%">
        <div v-show="!onEdit">
          <el-text>{{ classInfo.name }}</el-text>
        </div>
        <div v-show="onEdit">
          <el-input
            ref="inputClassNameRef"
            v-model="classInfo.name"
            @blur="saveClassInfo"
          ></el-input>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="人数">
        <div style="display: flex; align-items: center">
          <el-text>{{ classInfo.size }}</el-text>
          <el-button text type="primary" @click="toClassMember">查看</el-button>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <div v-if="classInfo.status === EnumClassStatus.ENABLE">
          <el-text type="success">{{ classInfo.status }}</el-text>
        </div>
        <div v-else>
          <el-text type="danger">{{ classInfo.status }}</el-text>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="余额">{{
        classInfo.balance
      }}</el-descriptions-item>
      <el-descriptions-item label="操作">
        <div v-if="isClassAdmin">
          <div v-show="!onEdit">
            <el-button text type="success" @click="startEditClass"
              >修改</el-button
            >
            <el-popconfirm title="确定要解散班级吗？" @confirm="deleteClass">
              <template #reference>
                <el-button text type="danger">解散</el-button>
              </template>
            </el-popconfirm>
          </div>
          <div v-show="onEdit">
            <el-button text type="primary">保存</el-button>
          </div>
        </div>
        <div v-else>
          <el-popconfirm title="确定要退出班级吗？" @confirm="exitClass">
            <template #reference>
              <el-button text type="danger">退出</el-button>
            </template>
          </el-popconfirm>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import {
  deleteClassByIdApi,
  exitClassApi,
  getCurrentClassApi,
  updateClassInfoApi,
} from '@src/apis/classApi.ts'
import { router } from '@util/RouterUtil.ts'
import { ElMessage } from 'element-plus'
import useUserStore from '@src/stores/useUserStore.ts'
import TokenUtil from '@util/TokenUtil.ts'
import { TypeClassInfo } from '@src/interfaces/TypeClassInfo.ts'
import { EnumClassStatus } from '@src/enums/EnumClassStatus.ts'
import { storeToRefs } from 'pinia'
import { EnumUserRole } from '@src/enums/EnumUserRole.ts'

const { userInfo } = storeToRefs(useUserStore())
const isClassAdmin = computed(() => {
  return userInfo.value.role === EnumUserRole.CLASS_ADMIN
})

const classInfo = ref<TypeClassInfo>({
  name: '未知',
  size: 1,
  status: EnumClassStatus.ENABLE,
  balance: 0,
})

function getCurrentClass() {
  getCurrentClassApi().then(({ data }) => {
    classInfo.value = data
  })
}

/**
 * 查看班级成员
 */
function toClassMember() {
  router.push('/class/member')
}

/**
 * 解散班级
 */
function deleteClass() {
  deleteClassByIdApi(<number>classInfo.value.id).then(() => {
    ElMessage.success('解散成功！')
    toJoinClass()
  })
}

function toJoinClass() {
  router.push('/class/join')
}

const onEdit = ref(false)
const inputClassNameRef = ref<HTMLInputElement>()
function startEditClass() {
  onEdit.value = true
  inputClassNameRef.value?.focus()
}

/**
 * 保存班级信息
 */
function saveClassInfo() {
  onEdit.value = false
  updateClassInfoApi(classInfo.value).then(() => {
    ElMessage.success('修改成功')
  })
}

/**
 * 退出班级
 */
function exitClass() {
  exitClassApi().then(() => {
    ElMessage.success('退出成功')
    router.push('/class/join')
  })
}

onMounted(() => {
  TokenUtil.refresh().then(() => {
    const classId = useUserStore().userInfo.classId
    if (!classId) {
      ElMessage.warning('未加入班级')
      toJoinClass()
      return
    }
    getCurrentClass()
  })
})
</script>

<style scoped lang="less">
h2 {
  text-align: center;
  .el-text {
    font-size: 2em;
  }
}
</style>
